<template>
	<view class="container">
		<view class="top-info bg-white d-flex flex-column align-items-center">
			<view class="font-size-lg font-weight-bold mb-20 mt-30">
				订单已完成
			</view>
			<view class="font-size-base mb-20">
				配送成功，祝您购物愉快
			</view>
			<view class="d-flex align-items-center font-size-sm mb-20 bg-grey p-10"
				@tap.stop="copyText(order.order_no)">
				订单号：121231123
				<image src="/static/images/order/copy-icon.png" mode=""
					style="width: 36rpx;height: 36rpx; margin-left: 6rpx;"></image>
			</view>
		</view>
		<view style="padding:20rpx;">
			<view class="bg-white">
				<view class="section">
					<!-- store info begin -->
					<list-cell lineLeft lineRight>
						<view class="w-100 d-flex align-items-center">
							<view class="d-flex flex-column w-60">
								<view class="w-100 font-size-lg font-weight-bold text-color-base text-truncate mb-10">
									{{ order.store.name }}
								</view>
								<view class="w-100 d-flex align-items-center ">
									<!-- <image src="/static/images/order/location.png" class="flex-shrink-0"
										style="width: 30rpx; height: 30rpx;"></image> -->
									<view class=" font-size-sm text-color-assist">{{ order.store.address }}
									</view>
								</view>
							</view>
							<view class="d-flex justify-content-end align-items-center w-40">
								<image src="/static/images/order/mobile.png"
									style="width: 60rpx; height: 60rpx;margin-right: 30rpx;" @tap.stop="makeCall">
								</image>
								<image src="/static/images/order/navigation.png" style="width: 60rpx; height: 60rpx;">
								</image>
							</view>
						</view>
					</list-cell>
					<!-- store info end -->
				</view>
				<!-- goods begin -->
				<list-cell padding="50rpx 30rpx" last>
					<view class="w-100 d-flex flex-column position-relative" style="margin-bottom: -40rpx;">
						<view class="w-100 d-flex align-items-center justify-content-between mb-40"
							v-for="(good, index) in order.goods" :key="index">

							<view class="d-flex align-items-center" style="height: 96rpx;">
								<!-- <image src="../../static/images/mine/default.png" mode="" class="shop-image"> -->
								<image src="https://wx4.sinaimg.cn/mw690/64be6620ly1hsgup6bwnwj20m80m8t9w.jpg" mode=""
									class="shop-image">
								</image>
								<view class="d-flex flex-column justify-content-between overflow-hidden h-100">
									<view class="font-size-lg font-weight-bold text-color-base mb-10 text-truncate">
										{{ good.name }}
									</view>
									<view class="font-size-sm text-color-assist text-truncate">{{ good.property }}
									</view>
								</view>
							</view>

							<view class="d-flex flex-column justify-content-between text-right" style="height: 96rpx;">
								<view class="font-size-base text-color-base">￥{{ good.price }}</view>
								<view class="font-size-sm text-color-assist">x{{ good.number }}</view>
							</view>
						</view>
					</view>
				</list-cell>
				<!-- goods end -->
			</view>
			<view class="section-other">
				<!-- payment and amount begin -->
				<list-cell padding="50rpx 30rpx" last>
					<view class="w-100 d-flex flex-column">
						<view class="pay-cell">
							<view>支付方式</view>
							<view class="font-size-base text-color-base">{{ order.pay_mode }}</view>
						</view>
						<view class="pay-cell">
							<view>微信支付</view>
							<view class="font-size-base text-color-base">￥{{ order.amount }}</view>
						</view>
						<view class="pay-cell">
							<view>实付</view>
							<view class="font-size-base text-color-base">￥{{ order.amount }}</view>
						</view>
					</view>
				</list-cell>
				<!-- payment and amount end -->
			</view>
			<view class="section-other">
				<!-- order info begin -->
				<list-cell padding="50rpx 30rpx 20rpx" last>
					<view class="w-100 d-flex flex-column">
						<view class="pay-cell">
							<view>下单时间</view>
							<view class="font-size-base text-color-base">{{ $util.formatDateTime(order.created_at) }}
							</view>
						</view>
						<view class="pay-cell">
							<view>下单门店</view>
							<view class="font-size-base text-color-base">{{ order.store.name }}</view>
						</view>

						<view class="pay-cell">
							<view>订单号</view>
							<view class="d-flex align-items-center justify-content-end">
								<view>{{ order.order_no }}</view>
								<view class="copy-text" @tap="copyText(order.order_no)">复制</view>
							</view>
						</view>
						<view class="pay-cell">
							<view>备注</view>
							<view class="font-size-base text-color-base">{{ order.postscript }}</view>
						</view>
					</view>
				</list-cell>
				<!-- order info end -->
			</view>
		</view>
	</view>
</template>

<script>
	import Orders from '@/api/orders';
	import listCell from '@/components/list-cell/list-cell';

	export default {
		components: {
			listCell
		},
		data() {
			return {
				order: {}
			};
		},
		onLoad({
			id
		}) {
			this.order = Orders.find(item => item.id == id);
		},
		methods: {
			copyText(text) {
				uni.setClipboardData({
					data: '112121****4544',
					success: function() {
						console.log('success', text);
					}
				});
			},

			makeCall() {
				uni.makePhoneCall({
					phoneNumber: '13530838077', // 电话号码
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function(err) {
						console.error('拨打电话失败：', err);
					}
				});
			}

		}
	};
</script>

<style lang="scss" scoped>
	@mixin arch {
		content: "";
		position: absolute;
		background-color: $bg-color;
		width: 30rpx;
		height: 30rpx;
		bottom: -15rpx;
		z-index: 10;
		border-radius: 100%;
	}

	.top-info {}

	.section {
		position: relative;

		&::before {
			@include arch;
			left: -15rpx;
		}

		&::after {
			@include arch;
			right: -15rpx;
		}
	}

	.section-other {
		margin-top: 20rpx;
		border-radius: 20rpx;
	}

	.pay-cell {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: $font-size-base;
		color: $text-color-base;
		margin-bottom: 40rpx;

		&:nth-last-child(1) {
			margin-bottom: 0;
		}

		.copy-text {
			margin-left: 10rpx;
			padding: 2rpx 20rpx;
			border-radius: 8rpx;
			font-size: 24rpx;
			border: 2rpx solid $text-color-grey;
		}
	}

	.shop-image {
		width: 96rpx;
		height: 96rpx;
		margin-right: 10rpx;
	}
</style>